<template>
	<view class="content">
		<view class="pay-con">
			<view>
				学校名称：<text style="color:#000000">{{school}}</text>
			</view>
			<view style="margin-top: 31rpx;">
				学生姓名：<text style="color:#000000">{{pageData.name}}</text>
			</view>
			<view style="margin-top: 31rpx;">
				学生编码：<text style="color:#000000">{{pageData.code}}</text>
			</view>
			<view style="margin-top: 31rpx;">
				需缴费用：<text style="color:#FD2222">￥{{pageData.amount}}</text>
			</view>
		</view>
		<view class="upload-con">
			<view style="margin-bottom: 10rpx;">
				请上传缴费凭证
			</view>
			<view class="upload-img">
				<u-upload :fileList="fileList" width="400rpx" height="400rpx" @afterRead="afterRead" @delete="deletePic"
					multiple :maxCount="1" :previewFullImage="true"></u-upload>
			</view>
		</view>

		<!-- <view style="width: 688rpx;margin-top: 23rpx;border-radius: 10rpx;">
			<view class="pay-list" v-for="(item,index) in tablist" :key="index">
				<view class="list-type">{{item.name}}</view>
				<view class="list-type" style="width: auto;flex: 1;background-color: #FFFFFF;">￥{{item.num}}</view>
			</view>
			<view class="pay-list" style="border: none;">
				<view class="list-type" style="background: #D3E0FF;">总计</view>
				<view class="list-type" style="width: auto;flex: 1;background-color: #FFFFFF;color: #FD2222;">￥3199.00
				</view>
			</view>
		</view> -->
		<!-- <view class="index-but" @click="goDetai">
			立即缴费
		</view> -->

	</view>
</template>

<script>
	import config from '@/config'

	export default {
		data() {
			return {
				fileList: [],
				school: '',
				pageData: {},
				tablist: [{
						name: '学费',
						num: '3000'
					},
					{
						name: '书本费',
						num: '199'
					}
				]
			}
		},
		onLoad(option) {
			this.pageData = JSON.parse(decodeURIComponent(option.item));
			this.school = option.school
			console.log(this.pageData);
		},
		methods: {
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map(item => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					uni.showToast({
						title: '上传成功，待老师审核',
						duration: 5000,
						icon: 'none'
					})
					// this.carImg.push(result.url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						// url: result.fullurl
					}))
					fileListLen++
				}

			},
			async uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.api + '/business/billDetail/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							id: this.pageData.id
						},
						success: res => {
							console.log(res.data);
							if (res.data) {
								let obj = JSON.parse(res.data);
								console.log(obj);
								if (obj.code == 200) {
									resolve(obj)
								} else {
									uni.showToast({
										title: '上传失败，请稍后再试',
										icon: 'none'
									})
									reject(obj.msg)
								}

							}
						},
						fail: err => {
							console.log(err);
							reject()
						}

					});
				});


			},
			deletePic(event) {
				this.fileList.splice(event.index, 1);
				// 	this.carImg.splice(event.index, 1);
			},
			goDetai() {
				// uni.navigateTo({
				// 	url: '/pages/payResult/payResult?id=1'
				// })
			},
			// H5 微信支付 
			async cardAppointmentWx() {
				try {
					uni.showLoading({
						title: '挂号中...',
						mask: true
					})
					const subdata = {
						patientId: this.selectUser.patientId,
						asRowId: this.selectDoctor.asRowId,
						schedualNo: this.selectDoctor.schedualNo,
						money: this.selectDoctor.feeMoney,
						startTime: this.startTime,
						endTime: this.endTime,
						date: this.selectDoctor.date,
					}
					const res = await createApi({
						id: this.selectUser.id,
						type: 4,
						money: this.selectDoctor.feeMoney,
						ext: JSON.stringify(subdata)
					})
					console.log(JSON.parse(res.msg));
					uni.hideLoading()
					this.wxpayOrder(JSON.parse(res.msg))

				} catch (e) {
					uni.hideLoading()
				}

			},
			wxpayOrder(data) {
				if (typeof WeixinJSBridge === 'undefined') {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false)
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data))
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data))
					}
				} else {
					this.onBridgeReady(data)
				}
			},
			onBridgeReady(etr) {
				let that = this
				WeixinJSBridge.invoke( //这个对象只有微信浏览器支持
					'getBrandWCPayRequest', etr,
					function(res) {
						if (res.err_msg == 'get_brand_wcpay_request:ok') {
							uni.navigateTo({
								url: '/pages/booksucceed/booksucceed'
							})
						} else {
							uni.$u.toast('挂号失败')
						}
					})

			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		background-color: #FAFAFA;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 23rpx;
	}

	.pay-con {
		width: 688rpx;
		background-color: #FFFFFF;
		padding: 31rpx;
		box-sizing: border-box;
		font-size: 27rpx;
		color: #666666;
	}

	.upload-con {
		width: 688rpx;
		background-color: #FFFFFF;
		padding: 31rpx;
		box-sizing: border-box;
		font-size: 31rpx;
		color: #000000;
		margin-top: 23rpx;
	}

	.upload-img {
		margin-top: 31rpx;
	}

	.pay-list {
		height: 83rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E7E7E7;
	}

	.list-type {
		width: 246rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EEF3FF;
	}

	.index-but {
		margin-top: 90rpx;
		width: 688rpx;
		height: 85rpx;
		background: #4078FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 31rpx;
		color: #FFFFFF;
	}
</style>